<template>
  <!--TODO: add by axiang [20190702] 颜色表示的逻辑非常糟糕，等待重构 -->
  <div class="docker">
    <el-card class="box-card">
      <div slot="header">随机用户PK</div>
      <div class="search-username-bar">
         <el-button>已为您匹配到用户：凉凉</el-button>
         <el-button type="success" round @click="$router.push('/ProblemPK')">准备</el-button>
      </div>
      <div class="search-label-bar">
        <el-input
          v-model="input"
          placeholder="label"
          size="mini"
          style="width:250px"
        >
          <template slot="prepend">搜索标签</template>
        </el-input>
        
        <el-button
          icon="el-icon-search"
          type="primary"
          size="mini"
          @click="getSearch(1)"
        >确定</el-button>
    
      </div>
        <el-table-column width="50" class="label-card1">
          <el-row>
            <el-button size= "mini" type="danger">保留题目</el-button>
            <el-button size= "mini" type="danger">系统测试</el-button>
            <el-button size= "mini" type="danger">自动上传</el-button>
          </el-row>
        </el-table-column>
        <el-table-column class="label-card2">
            <el-row>
              <el-button size= "mini" type="success">文件IO</el-button>
            </el-row>
        </el-table-column>
        <el-table-column class="label-card3">
          <el-row>
            <el-button size= "mini" type="warning">交互题</el-button>
            <el-button size= "mini" type="warning">子任务</el-button>
            <el-button size= "mini" type="warning">提交答案</el-button>
          </el-row>
        </el-table-column>
        <el-table-column class="label-card4">
          <el-row>
            <el-button type="primary">DP</el-button>
            <el-button type="primary">ad hoc</el-button>
            <el-button type="primary">不平等博弈</el-button>
            <el-button type="primary">二分</el-button>
            <el-button type="primary">二进制</el-button>
            <el-button type="primary">分数规划</el-button>
            <el-button type="primary">分治</el-button>
            <el-button type="primary">博弈论</el-button>
            <el-button type="primary">图论</el-button>
          </el-row>
        </el-table-column>
        <el-table-column class="label-card4">
          <el-row>
            <el-button type="warning">映射与反演</el-button>
            <el-button type="warning">构造</el-button>
            <el-button type="warning">模拟</el-button>
            <el-button type="warning">程序实现</el-button>
            <el-button type="warning">线性规划</el-button>
            <el-button type="warning">网络流</el-button>
            <el-button type="warning">近似算法</el-button>
            <el-button type="warning">递推</el-button>
            <el-button type="warning">差分</el-button>
          </el-row>
        </el-table-column>
        <el-table-column class="label-card4">
          <el-row>
            <el-button type="info">BFS树</el-button>
            <el-button type="info">Hash</el-button>
            <el-button type="info">LCA</el-button>
            <el-button type="info">斜率优化</el-button>
            <el-button type="info">线性规划</el-button>
            <el-button type="info">整体二分</el-button>
            <el-button type="info">单调线</el-button>
            <el-button type="info">容斥原理</el-button>
            <el-button type="info">LGV引理论</el-button>
          </el-row>
        </el-table-column>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loading: '',
      input: '',
      Rank: 0,
      currentPage: 1,
      currentTotal: 0,
      tableData: [],
      isSearch: false
    }
  },
  mounted () {
    this.getAcRank(this.currentPage)
  },
  methods: {
    async getAcRank (val) {
      this.tableData = []
      this.loading = true
      let params = new URLSearchParams()
      params.append('pageNum', val)
      params.append('pageSize', 10)
      this.currentPage = val
      let dataUserRank = await this.$http.get('/border/mini', params)
      this.loading = false
      this.tableData = dataUserRank.datas[2]
      // this.Total = dataUserRank.datas[1]
      // console.log(this.currentTotal)
    },
    async getSearch (val) {
      if (this.input !== null) {
        this.loading = true
        this.currentPage = val
        this.isSearch = true
        let params = new URLSearchParams()
        params.append('username', this.input)
        params.append('pageNum', this.currentPage)
        params.append('pageSize', 10)
        let dataUserRankByName = await this.$http.get('/border/honor_rank', params)
        this.loading = false
        this.tableData = []
        this.currentTotal = dataUserRankByName.datas[0]
        this.tableData = dataUserRankByName.datas[1]
      }
    },
    getList (val) {
      if (this.isSearch) {
        this.getSearch(val)
      } else {
        this.getAcRank(val)
      }
    },
    indexMethod (index) {
      return index + (this.currentPage - 1) * 50 + 1
    },
    toUser (row) {
      this.$router.push({ path: '/User', query: { username: row.username } })
    }
  }
}
</script>
<style scoped>
.docker {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 700px;
}

.box-card {
  width: 75%;
  height: 100%;
  min-height: 800px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  margin-top: 2%;
  margin-bottom: 2%;
}

.label-card1 {
  width: 85%;
  height: 90%;
  display: block;
  padding: 0;
  margin-top: 2%;
  margin-bottom: 2%;
  border: 2px;
}

.label-card2 {
  width: 85%;
  height: 90%;
  display: block;
  padding: 0;
  margin-top: 1%;
  margin-bottom: 2%;
  border: 2px;
}

.label-card3 {
  width: 85%;
  height: 90%;
  display: block;
  padding: 0;
  margin-top: 1%;
  margin-bottom: 2%;
  border: 2px;
}

.label-card4 {
  width: 85%;
  height: 90%;
  display: block;
  padding: 0;
  margin-top: 5%;
  margin-bottom: 2%;
  border: 2px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.functionBar {
  width: 100%;
  margin: 0;
  padding: 0;
  height: 50px;
  border-bottom: 1px solid silver;
}

.search-username-bar {
  margin-top: 2%;
  margin-left: 300px;
  width: 50%;
  
}

.search-label-bar {
  margin-top: 8%;
  width: 40%;

}

.pagination {
  float: left;
  margin-left: 10px;
  height: 30px;
  margin-top: 10px;
}

.input {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  height: 30px;
  width: 200px;
}

</style>
